<template>
  <el-dialog
    title="选择客户经理A"
    :visible.sync="custManagerIdDialogVisible"
    width="50%"
    :before-close="custManagerIdHandleClose"
  >
    <span>
      <!-- 表单 -->
      <el-form :inline="false" label-width="80px" :model="commonRegionIdForm">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="员工编码" class="u-ipt">
                <el-input
                  placeholder=""
                  v-model="custManagerIdForm.custCode"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="员工名称" class="u-ipt">
                <el-input
                  placeholder="请输入内容"
                  v-model="custManagerIdForm.custName"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="组织名称" class="u-ipt">
                <el-input
                  placeholder="请输入内容"
                  v-model="custManagerIdForm.organizationName"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="手机号码" class="u-ipt">
                <el-input
                  placeholder="请输入内容"
                  v-model="custManagerIdForm.telNumber"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="small" @click="queryCustManagerId"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="custManagerIdTable"
        border
        :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
        @row-click="custManagerIdDialogRow"
        class="commonRegionId-table"
      >
        <el-table-column property="identityRegion" label="地区标识">
        </el-table-column>
        <el-table-column property="regionName" label="地区名称">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querycustManagerIdDialog.pageIndex"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="querycustManagerIdDialog.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="querycustManagerIdDialog.pageCount"
        class="m-pagination"
      >
      </el-pagination>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "CustManagerIdDialog",
  props: {
    custManagerIdDialogVisible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      // 客户经理弹窗表单
      custManagerIdForm: {
        custCode: "员工编码",
        custName: "员工名称",
        organizationName: "组织名称",
        telNumber: "手机号码",
      },
      // 客户经理表格数据
      custManagerIdTable: [
        {
          custCode: "员工编码",
          custName: "员工名称",
          organizationName: "组织名称",
          telNumber: "手机号码",
        },
        {
          custCode: "员工编码",
          custName: "员工名称",
          organizationName: "组织名称",
          telNumber: "手机号码",
        },
      ],
      // 客户经理表格分页
      querycustManagerIdDialog: {
        pageIndex: 1, //当前页码
        pageSize: 5, //每页多少条
        rowCount: 10, //总条数
        pageCount: 10, //总页数
      },
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    // 关闭客户经理弹窗
    custManagerIdHandleClose() {
      this.custManagerIdDialogVisible = false;
    },
    // 客户经理查询方法
    queryCustManagerId() {},
    // 客户经理点击表格事件
    custManagerIdDialogRow(val) {
      
      this.custManagerIdDialogVisible = false;
      this.custManagerIdForm.custName = val.custName;
      // this.formData.commonRegionId = val.regionName;
    },
  },
};
</script>
<style lang="scss" scoped></style>
